import React, { useRef, useState } from 'react'
/* 
非受控组件
  输入的数据不与状态数据同步
  点击提交按钮, 需要通过ref得到输入框读取输入数据
受控组件
  输入数据与状态数据是同步的
   点击提交按钮, 直接状态数据
*/
export default function FormTest() {

  // 定义input的ref容器
  const nameRef = useRef()
  const pwdRef = useRef()

  const submit = (e) => {
    // 阻止事件的默认行为: 提交表单
    e.preventDefault()

    // 得到输入的用户名和密码
    const name = nameRef.current.value
    const pwd = pwdRef.current.value
    // 发登陆请求, 携带用户名和密码
    alert(`发送登陆的ajax请求 name=${name}, pwd=${pwd}`)
  }
  return (
    <form onSubmit={submit}>
      <h2>登陆页面(非受控组件)</h2>
      用户名: <input type="text" ref={nameRef}/> <br/>
      密  码: <input type="password" ref={pwdRef}/> <br/>
      <input type="submit" value="登 陆" />{/* onClick={submit} */}
    </form>
  )
}


export function FormTest2() {

  const [name, setName] = useState('admin')
  const [pwd, setPwd] = useState('123')

  const submit = (e) => {
    // 阻止事件的默认行为: 提交表单
    e.preventDefault()

    // 直接读取状态中name和pwd
    
    // 发登陆请求, 携带用户名和密码
    alert(`发送登陆的ajax请求 name=${name}, pwd=${pwd}`)
  }

  const handleNameChange = (e) => {
    // 读取输入的最新值, 更新name
    const name = e.target.value
    setName(name)

    // 进行表单校验
    if (name.length>6) {
      alert('用户名长度不能超过6位')
    }
  }
  const handlePwdChange = (e) => {
    // 读取输入的最新值, 更新npwd
    setPwd(e.target.value)
  }
  return (
    <form onSubmit={submit}>
      <h2>登陆页面(受控组件)</h2>
      用户名: <input type="text" value={name} onChange={handleNameChange}/> <br/>
      密  码: <input type="password" value={pwd} onChange={handlePwdChange}/> <br/>
      <input type="submit" value="登 陆" />{/* onClick={submit} */}
    </form>
  )
}


export function FormTest3() {

  const [name, setName] = useState('admin')
  const [pwd, setPwd] = useState('123')

  const submit = (e) => {
    // 阻止事件的默认行为: 提交表单
    e.preventDefault()

    // 直接读取状态中name和pwd
    
    // 发登陆请求, 携带用户名和密码
    alert(`发送登陆的ajax请求 name=${name}, pwd=${pwd}`)
  }

  const handleChange = (e, setFn) => {
    const value = e.target.value
    setFn(value)
  }

  // 函数柯里化
  const handleChange2 = (setFn) => {
    return (e) => {
      setFn(e.target.value)
    }
  }

  return (
    <form onSubmit={submit}>
      <h2>登陆页面(优化)</h2>
      用户名: <input type="text" value={name} onChange={(e) => handleChange(e, setName)}/> <br/>
      密  码: <input type="password" value={pwd} onChange={e => handleChange(e, setPwd)}/> <br/>

      用户名2: <input type="text" value={name} onChange={handleChange2(setName)}/> <br/>
      密  码2: <input type="password" value={pwd} onChange={handleChange2(setPwd)}/> <br/>
      <input type="submit" value="登 陆" />{/* onClick={submit} */}
    </form>
  )
}